<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-fafafa" :isBack="true" :zIndex="999">
			<block slot="backText"></block>
			<block slot="content">修改密码</block>
		</cu-custom>
		<view :style="'height:'+(winHeight-barHeight)+'px;width:100%;position:relative;'">
			<common-view :indicator="indicator" :animationClass="animation" @closeAnimation="closeAnimation"> </common-view>
			<scroll-view class="page" scroll-y :style="'height:'+(winHeight-barHeight)+'px;'">
				<view class="cu-form-group margin-top solid-bottom" style="overflow-x: hidden;">
					<view class="title text-bold">手机号:</view>
					<text class="text-gray" v-if="userInfo && userInfo.mobile">{{userInfo.mobile.substring(0,3)+'****'+userInfo.mobile.substring(7,11)}}</text>
				</view>
				<view class="cu-form-group solid-bottom" style="overflow-x: hidden;">
					<view class="title text-bold">验证码:</view>
					<input class="ipt" placeholder-class='iptp' type="text" @input="codeInput" placeholder="验证码"/>
					<button class="cu-btn round lines-themeColor" style="margin-top:16upx;font-size:26upx;" @click="getCode" :disabled="downT==60?false:true">{{downT==60?"获取验证码":"获取验证码("+downT+")"}}</button>
				</view>
				<view class="cu-form-group" style="overflow-x: hidden;">
					<view class="title text-bold">新密码:</view>
					<input class="ipt" placeholder-class='iptp' type="text" @input="pwdInput" :password="showPassword" placeholder="新密码" />
					<view class="showpwd" :class="[!showPassword ? 'icon-attentionfill' : 'icon-attention']" @click="changePassword"></view>
				</view>
				
				
				<!-- #ifndef APP-PLUS -->
				<view class="cu-tabbar-height"></view>
				<view class="cu-bar tabbar foot bg-white shadow" style="display:block;">
					<view style="padding: 20upx 30upx;">
						<button class="cu-btn block bg-themeColor text-bold lg round" @click="save"
							:disabled="indicator?true:false" style="font-size:26upx;">
							保 存
						</button>
					</view>
				</view>
				<!-- #endif -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let disp = require("common/broadcast");
	import commonObj from 'model/commonModel.js';
	import userObj from 'model/userModel.js';
	let me = null;
	export default {
		data() {
			return {
				indicator: 0,
				barHeight: 0,
				customShow: 0,
				animation: '',
				
				showPassword: true,
				downT:60,
				
				code:'',
				mobile:'',
				password:''
			};
		},
		onLoad() {
			me = this;
			this.barHeight = this.NativeBar;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			this.barHeight = this.CustomBar;
			//#endif
			this.mobile = this.userInfo.mobile || '';
		},
		onReady() {},
		onNavigationBarButtonTap(e) {
			this.save();
		},
		computed: {
			...mapState({
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				navHeight: ({
					baseModule
				}) => baseModule.navHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo,
			})
		},
		methods: {
			...mapMutations(['userModule/logout']),
			closeAnimation() {
				this.animation = "";
				this.indicator = 0;
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			codeInput(event) {
				this.code = event.target.value
			},
			pwdInput(event) {
				this.password = event.target.value
			},
			getCode(){
				if (this.mobile.length < 1) {
					uni.showToast({
						title: '手机号码未知',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				commonObj.sendSMS(me,{appid:this.appId,mobile:this.mobile}).then(res=>{
					uni.showToast({
						title: '验证码已发送',
						icon: 'none',
						duration: 1000
					});
					me.downT = 59;
					var f = function(){
						me.downT--;
						if(me.downT==0){
							me.downT = 60;
							clearInterval(t);
						}
					};
					var t = setInterval (f,1000);
				}).catch(err=>{
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});	
				
			},	
			save() {
				if (this.code.length < 1) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (this.code.length != 4) {
					uni.showToast({
						title: '验证码错误',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (this.password.length < 1) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				if (this.password.length < 6) {
					uni.showToast({
						title: '新密码不能小于6位',
						icon: 'none',
						duration: 1000
					});
					return false;
				}

				this.indicator = 1;
				userObj.resetPwd(me,{mobile:this.mobile,code:this.code,password:this.password}).then(res=>{
					this.animation = "page-mark-fade-out";
					uni.showModal({
						title: '修改成功',
						content: '密码修改成功,请重新登陆。',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								me.setUserInfo(null);
								me['userModule/logout']();
								me.$nextTick(function() {
									uni.navigateBack({
										delta: 2
									})
								});
							}
						}
					})
				}).catch(err => {
					this.indicator=0;
					uni.showModal({
						title: '错误提示',
						content: err,
						showCancel: false
					});
				});
			}
		}
	}
</script>

<style>
	.cu-bar.tabbar,
	.cu-tabbar-height {
		min-height: 120upx;
	}
</style>
